<template>
  <div class="dashboard">
    <!-- 1,顶部数字统计展示 -->
    <el-row :gutter="10">
      <template v-for="item in amountList" :key="item.amount">
        <el-col :lg="6" :sm="12" :md="8" :xs="24" :span="6"
          ><countCard v-bind="item"></countCard
        ></el-col>
      </template>
    </el-row>

    <!-- 2.中间的图标 -->
    <el-row :gutter="2">
      <el-col :span="7">
        <chart-card header="分类商品数量（饼图）">
          <PieEchart :pie-data="showGoodsCategoryCount"></PieEchart>
        </chart-card>
      </el-col>
      <el-col :span="10">
        <chart-card
          ><MapEchart :map-data="showGoodsAddressSale"></MapEchart
        ></chart-card>
      </el-col>
      <el-col :span="7">
        <chart-card header="分类商品数量（玫瑰图）"
          ><RoseEchart :rose-data="showGoodsCategoryCount"></RoseEchart>
        </chart-card>
      </el-col>
    </el-row>

    <!-- 3.底部的图图标 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <chart-card
          ><LineEchart v-bind="showGoodsCategorySale"></LineEchart>
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card
          ><BarEchart v-bind="showGoodsCategoryfavor"></BarEchart>
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import useAnalysisStore from '@/store/main/analysis/analysis'
import countCard from './c-cpns/count-card/count-card.vue'
import ChartCard from './c-cpns/chart-card/chart-card.vue'
import {
  PieEchart,
  LineEchart,
  RoseEchart,
  BarEchart,
  MapEchart
} from '@/components/page-echarts'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
//1,发请求
const AnalysisStore = useAnalysisStore()
AnalysisStore.fechAnalysisDataAction()
// 2 获取count-card数据
const {
  amountList,
  goodsCategoryCount,
  goodsCategorySale,
  goodsCategoryfavor,
  goodsAddressSale
} = storeToRefs(AnalysisStore)
// 3,对数据进行转换   computed 包裹 sotre数据变化也能跟着变化
const showGoodsCategoryCount = computed(() => {
  return goodsCategoryCount.value.map((item) => ({
    name: item.name,
    value: item.goodsCount
  }))
})
const showGoodsCategorySale = computed(() => {
  const labels = goodsCategorySale.value.map((item) => item.name)
  const values = goodsCategorySale.value.map((item) => item.goodsCount)
  return { labels, values }
})
const showGoodsCategoryfavor = computed(() => {
  const labels = goodsCategoryfavor.value.map((item) => item.name)

  const values = goodsCategoryfavor.value.map((item) => item.goodsFavor)
  return { labels, values }
})
const showGoodsAddressSale = computed(() => {
  return goodsAddressSale.value.map((item) => ({
    name: item.address,
    value: item.count
  }))
})
</script>
<style lang="less" scoped>
.dashboard {
  color: red;
}
.el-row {
  margin-bottom: 10px;
}
.echart {
  height: 250px;
}
</style>
